<template>
  <div class="app-container">
    <el-empty v-if="true" style="padding-top: 200px" />
    <div v-else>
      <div class="tip d-flex align-items-center">
        <el-date-picker
          v-model="daterange"
          align="center"
          end-placeholder="结束日期"
          range-separator="~"
          start-placeholder="开始日期"
          type="daterange"
          value-format="yyyy-MM-dd"
        />
        <span class="mlauto font-bold">
          总计：
          <b class="font24 color-danger">{{ sumData }}</b>
          mm
        </span>
      </div>
      <div class="h12"></div>
      <ve-histogram
        ref="irrData"
        :data="irrDataFilter"
        :extend="chartExtend"
        :height="chartHeight"
      />
    </div>
  </div>
</template>

<script>
  import { deepClone, sum } from '@/utils'
  export default {
    data() {
      return {
        activeName: 'first',
        daterange: '',
        chartHeight: '640px',
        chartExtend: {
          color: ['#67c23a', '#409eff', '#fc8452'],
          series(v) {
            // 设置柱子的样式
            v.forEach((i) => {
              i.barMaxWidth = 20
              i.stack = 'intelirri'
              i.itemStyle = {
                borderWidth: 0,
              }
            })
            return v
          },
        },

        irrDataFilter: {},
        irrDataRaw: {
          columns: ['日期', '作物需耗水量', 'ETc需水量', 'AWC土壤耗水量'],
          rows: [
            {
              日期: '2024-05-25',
              作物需耗水量: '1.3167575694928804',
            },
            {
              日期: '2024-05-26',
              作物需耗水量: '0.4117472628559603',
            },
            {
              日期: '2024-05-27',
              作物需耗水量: '3.3805910577071',
            },
            {
              日期: '2024-05-28',
              作物需耗水量: '3.22086474178463',
            },
            {
              日期: '2024-05-29',
              作物需耗水量: '2.62272177297095',
            },
            {
              日期: '2024-05-30',
              作物需耗水量: '0.6118237921008995',
            },
            {
              日期: '2024-05-31',
              作物需耗水量: '0.14701373775676535',
            },
            {
              日期: '2024-06-01',
              作物需耗水量: '2.1760176967597262',
            },
            {
              日期: '2024-06-02',
              作物需耗水量: '2.607243813420129',
            },
            {
              日期: '2024-06-03',
              作物需耗水量: '1.2036594677100934',
            },
            {
              日期: '2024-06-04',
              作物需耗水量: '2.5415936025677346',
            },
            {
              日期: '2024-06-05',
              作物需耗水量: '1.5291103020360548',
            },
            {
              日期: '2024-06-06',
              作物需耗水量: '5.516162653717254',
            },
            {
              日期: '2024-06-07',
              作物需耗水量: '1.9996743737232971',
            },
            {
              日期: '2024-06-08',
              作物需耗水量: '0.38001040758475685',
            },
            {
              日期: '2024-06-09',
              作物需耗水量: '3.785216653946135',
            },
            {
              日期: '2024-06-10',
              作物需耗水量: '0.7351455882309348',
            },
            {
              日期: '2024-06-11',
              作物需耗水量: '3.6605323149910287',
            },
            {
              日期: '2024-06-12',
              作物需耗水量: '1.597451442994258',
            },
            {
              日期: '2024-06-13',
              作物需耗水量: '0.4985136445528208',
            },
            {
              日期: '2024-06-14',
              作物需耗水量: '3.520472083606531',
            },
            {
              日期: '2024-06-15',
              作物需耗水量: '0.7064730830669308',
            },
            {
              日期: '2024-06-16',
              作物需耗水量: '2.7780200859465163',
            },
            {
              日期: '2024-06-17',
              作物需耗水量: '2.691963206600612',
            },
            {
              日期: '2024-06-18',
              作物需耗水量: '2.626650241004145',
            },
            {
              日期: '2024-06-19',
              作物需耗水量: '5.435880680235195',
            },
            {
              日期: '2024-06-20',
              作物需耗水量: '2.1689284078348394',
            },
            {
              日期: '2024-06-21',
              作物需耗水量: '0.9800880635709469',
            },
            {
              日期: '2024-06-22',
              作物需耗水量: '0.4559977121573609',
            },
            {
              日期: '2024-06-23',
              作物需耗水量: '1.1869851731700984',
            },
            {
              日期: '2024-06-24',
              作物需耗水量: '0.8357402006293064',
            },
            {
              日期: '2024-06-25',
              作物需耗水量: '0.31608529587917594',
            },
            {
              日期: '2024-06-26',
              作物需耗水量: '2.99179793008709',
            },
            {
              日期: '2024-06-27',
              作物需耗水量: '2.5006086090432738',
            },
            {
              日期: '2024-06-28',
              作物需耗水量: '4.808565304369777',
            },
            {
              日期: '2024-06-29',
              作物需耗水量: '3.0892662643439768',
            },
            {
              日期: '2024-06-30',
              作物需耗水量: '0.28428926840751034',
            },
            {
              日期: '2024-07-01',
              作物需耗水量: '1.4266321511283524',
            },
            {
              日期: '2024-07-02',
              作物需耗水量: '3.6700718121599967',
            },
            {
              日期: '2024-07-03',
              作物需耗水量: '0.9486866132911769',
            },
            {
              日期: '2024-07-04',
              作物需耗水量: '2.539884391078183',
            },
            {
              日期: '2024-07-05',
              作物需耗水量: '0.037565653321891046',
            },
            {
              日期: '2024-07-06',
              作物需耗水量: '1.2325072940629573',
            },
            {
              日期: '2024-07-07',
              作物需耗水量: '3.0262892419649936',
            },
            {
              日期: '2024-07-08',
              作物需耗水量: '1.425515180792698',
            },
            {
              日期: '2024-07-09',
              作物需耗水量: '0.7720517190180112',
            },
            {
              日期: '2024-07-10',
              作物需耗水量: '2.622670032931638',
            },
            {
              日期: '2024-07-11',
              作物需耗水量: '2.522547795590082',
            },
            {
              日期: '2024-07-12',
              作物需耗水量: '0.1599960713018547',
            },
            {
              日期: '2024-07-13',
              作物需耗水量: '1.6931736012886367',
            },
            {
              日期: '2024-07-14',
              作物需耗水量: '0.956232136433994',
            },
            {
              日期: '2024-07-15',
              作物需耗水量: '2.8595730200484044',
            },
            {
              日期: '2024-07-16',
              作物需耗水量: '1.9645829589373227',
            },
            {
              日期: '2024-07-17',
              作物需耗水量: '3.101481091076351',
            },
            {
              日期: '2024-07-18',
              作物需耗水量: '2.3928259569714516',
            },
            {
              日期: '2024-07-19',
              作物需耗水量: '3.265268799093937',
            },
            {
              日期: '2024-07-20',
              作物需耗水量: '2.9341347065554966',
            },
            {
              日期: '2024-07-21',
              作物需耗水量: '3.688505563990511',
            },
          ],
        },
      }
    },
    computed: {
      sumData() {
        return sum(
          this.irrDataFilter.rows.map((val) => +val.作物需耗水量)
        ).toFixed(2)
      },
      irrData() {
        const rows = this.irrDataRaw.rows.map((val) => {
          val['ETc需水量'] = Math.random() * 10
          val['AWC土壤耗水量'] = Math.random() * 10
          return val
        })
        return {
          columns: this.irrDataRaw.columns,
          rows,
        }
      },
    },
    watch: {
      daterange: {
        handler(newVal) {
          const irrData = deepClone(this.irrData)
          if (newVal) {
            this.irrDataFilter.rows = irrData.rows.filter((val) => {
              return val.日期 >= newVal[0] && val.日期 <= newVal[1]
            })
          } else {
            this.irrDataFilter = irrData
          }
        },
        immediate: true,
        deep: true,
      },
    },
    methods: {},
  }
</script>

<style lang="scss" scoped></style>
